<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>账户管理</span>
    </div>
    <v-tableBtns
      :show-export="true"
      :show-create="true"
      :table-title="exportTitle"
      :table-data="exportData"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      @del="del"
      @edit="edit"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      title="添加/修改银行账户"
      width="30%"
      center>
      <v-form
        :form-title="accountTitle"
        :form-data="accountData"
        label-width="120px"
      />

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import searchForm from '@/views/components/searchForm'

export default {
  name: 'Home',
  components: { searchForm },
  data() {
    return {
      isEdit: true,

      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },
      dialogVisible: false,
      tableTitle: [
        {
          cn: 'id',
          en: 'id'
        },
        {
          cn: '名称',
          en: 'name'
        },
        {
          cn: '开户行',
          en: 'openbank'
        },
        {
          cn: '账号',
          en: 'accounts'
        }
      ],
      tableData: [],

      exportTitle:[],
      exportData:[],

      originTableData: [],

      addTitle: [
        {
          cn: '名称',
          en: 'name'
        },
        {
          cn: '开户行',
          en: 'openbank'
        },
        {
          cn: '账号',
          en: 'accounts'
        }
      ],
      editTitle: [
        {
          cn: 'id',
          en: 'id',
          disabled: true
        },
        {
          cn: '名称',
          en: 'name'
        },
        {
          cn: '开户行',
          en: 'openbank'
        },
        {
          cn: '账号',
          en: 'accounts'
        },
        {
          cn: '最后修改人',
          en: 'modifier',
          disabled: true
        },
        {
          cn: '添加时间',
          en: 'created_at',
          disabled: true
        }
      ],
      accountData: {}
    }
  },
  activated() {
    this.getTableList()
  },
  methods: {
    getTableList() {
      this.$post('action/ReceivBank/dataGrid')
        .then(res => {
          let list
          if (res.data.list && res.data.list.length) {
            list = res.data.list.map((item, index) => {
              return item
            })
            this.pageInfo.totalPage = res.data.totalPage
            this.pageInfo.totalRow = res.data.totalRow
          }
          this.tableData = list || []
        })
    },

    addNew() {
      this.dialogVisible = true
      this.isEdit = false
    },
    edit(val) {
      this.dialogVisible = true
      this.isEdit = true
      this.accountData = this.$deepClone(val.row)
    },
    del(val) {
      const data = { id: val.row.id }
      this.$post('action/ReceivBank/del', data)
        .then(res => {
          this.getTableList()
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
    },
    submit() {
      this.dialogVisible = false
      const data = this.accountData
      this.$post('action/ReceivBank/save', data)
        .then(res => {
          this.getTableList()
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    accountTitle() {
      if (this.isEdit) {
        return this.editTitle
      } else {
        return this.addTitle
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .top-nav {
        padding: 0 55px 15px 0;
    }

    .line {
        text-align: center;
    }

    .grid-content {
        /*font-size: 20px;*/
        cursor: pointer;
        color: #45d1e1;

        .color {
            /*font-size: 20px;*/
            color: #45d1e1;
            font-weight: 600;
        }
    }

    .table-menu {
        /*padding-left: 30px;*/
        padding-bottom: 15px;
    }

    .block {
        padding-top: 15px;
    }
</style>

